<!--A Design by W3layouts
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
    <title>Sport A Ecommerce Category Flat Bootstarp Resposive Website Template | Home :: w3layouts</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Custom Theme files -->
    <!--theme-style-->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <!--//theme-style-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="Sport Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!--fonts-->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
    <!--//fonts-->
    <style>
        /* 遮罩层样式 */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 弹出框样式 */
        .popup {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            max-width: 300px;
            text-align: center;
        }

        /* 输入框样式 */
        .popup input {
            width: 100%;
            margin-bottom: 10px;
            padding: 8px;
            box-sizing: border-box;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=sHkKJTcoBcHOGH0mHWkM3TD0QBqfLuWA"></script>
</head>
<body>
<div id="app">
    <!--header-->
    <div class="line">

    </div>
    <div class="header">
        <div class="logo">
            <a href="index.html"><img src="images/logo.png" alt=""></a>
        </div>
        <div class="header-top">
            <div class="header-grid">
                <ul class="header-in">
                    <li><a href="account.html">我的账户 </a></li>
                    <li>
                        <select class="in-drop">
                            <option value="Yuan" class="in-of">人民币</option>
                            <option value="Dollars" class="in-of">美元</option>
                            <option value="Euro" class="in-of">欧元</option>
                        </select>
                    </li>
                </ul>
                <div class="search-box">
                    <!--                    <div id="sb-search" class="sb-sea rch" :class="{sb-search-open:isSearch==false , :isSearch==true}">-->
                    <div id="sb-search" class="sb-search" :class="{ 'sb-search-open': isSearch }">
                        <form>
                            <input class="sb-search-input" placeholder="输入您的搜索词..." type="search" name="search"
                                   id="search">
                            <input class="sb-search-submit" type="button" value="" @click="isSearch=!isSearch">
                            <!--                                <input class="sb-search-submit" type="submit" value="">-->
                            <span class="sb-icon-search"> </span>
                        </form>
                    </div>
                </div>
                <div class="online">
                    <a href="single.html">网上购物</a>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="header-bottom">
                <div class="h_menu4"><!-- start h_menu4 -->
                    <a class="toggleMenu" href="#">Menu</a>
                    <ul class="nav">
                        <li class="active" v-for="(item,index) in sstyle" :key="index"
                            @click="findStyleShoes(item.styleid)"><a
                                :href="'product.html#'+item.styleid">{{item.style}}</a></li>
                        <li><a href="product.html">更多 <i> </i></a>
                            <ul>
                                <li><a href="cart.html">购物车</a></li>
                                <li><a href="account.html">账户</a></li>
                                <li><a href="register.html">注册</a></li>
                            </ul>
                        </li>
                    </ul>

                </div><!-- end h_menu4 -->
                <ul class="header-bottom-in">
                    <li>
                        <select class="drop">
                            <option value="Yuan" class="in-of">活跃起来</option>
                            <option value="Euro" class="in-of">活跃起来1</option>
                            <option value="Dollars" class="in-of">活跃起来2</option>
                        </select>
                    </li>
                    <li>
                        <select class="drop">
                            <option value="Yuan" class="in-of">社区</option>
                            <option value="Euro" class="in-of">社区1</option>
                            <option value="Dollars" class="in-of">社区2</option>
                        </select>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    <!---->
    <!--    <div class="container">-->
    <table v-if="shoesCart.length>=1">
        <thead>
        <tr>
            <th>商品名</th>
            <th>商品价格</th>
            <th>购买数量</th>
            <th>小计</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody >
        <tr v-for="(item,index) in shoesCart" :key="index">
            <td><img :src="item.shoes.photourl" height="50px">{{item.shoes.sdescription}}</td>
            <td>{{item.shoes.sprice}}</td>
            <td>
                <button :disabled="item.num<=1" @click="increment(index,item.shoes.sid,-1)">-</button>
                {{item.num}}
                <button @click="increment(index,item.shoes.sid,1)">+</button>
            </td>
            <td>{{item.smallCount}}</td>
            <td>
                <button @click="remove(index,item.shoes.sid)">移除</button>
            </td>
        </tr>
        </tbody>
        <tr>
            <td colspan="3"></td>
            <td>${{cartprice}}</td>
            <td>
                <button @click="showCartTable=!showCartTable">下单</button>
            </td>
        </tr>
    </table>
    <div v-else>暂无购物，<a href="index.html">快去购物吧</a></div>
    <!--百度地图-->
    <div id="myaddress" style="display: none"></div>
    <!--footer-->
    <div class="footer">
        <div class="col-md-3 footer-left">
            <h4>体育</h4>
            <div class="run-top">
                <ul class="run-grid">
                    <li><a href="#">运动</a></li>
                    <li><a href="#">循环</a></li>
                    <li><a href="#">铁人三项</a></li>
                    <li><a href="#">健康</a></li>
                    <li><a href="#">网球</a></li>
                    <li><a href="#">更多运动</a></li>
                </ul>
                <ul class="run-grid">
                    <li><a href="#">风格</a></li>
                    <li><a href="#">特殊</a></li>
                    <li><a href="#">品牌活动</a></li>
                </ul>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-md-3 footer-left left-footer">
            <h4>最近的</h4>
            <div class="run-top top-run">
                <ul class="run-grid">
                    <li><a href="#">新闻 & 活动</a></li>
                    <li><a href="#">社区</a></li>
                    <li><a href="#">视频</a></li>
                    <li><a href="#">购物</a></li>
                    <li><a href="#">赞助</a></li>
                    <li><a href="#">更多运动</a></li>
                </ul>
                <ul class="run-grid">
                    <li><a href="#">俱乐部 & 培训 </a></li>
                    <li><a href="#">活动地图</a></li>
                    <li><a href="#">挑战世界</a></li>
                </ul>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-md-2 footer-left left-footer">
            <h4>您的账户</h4>
            <ul class="run-grid-in">
                <li><a href="account.html">登录</a></li>
                <li><a href="#">我的运动</a></li>
                <li><a href="#">我的活动</a></li>
            </ul>
        </div>
        <div class="col-md-4 footer-left left-footer">
            <ul class="social-in">
                <li><a href="#"><i> </i></a></li>
                <li><a href="#"><i class="youtube"> </i></a></li>
                <li><a href="#"><i class="facebook"> </i></a></li>
                <li><a href="#"><i class="twitter"> </i></a></li>
            </ul>
            <div class="letter">
                <h5>通讯</h5>
                <span>在下一篇文章中</span>
                <h6>NRL：本周末我们学到的五件事</h6>
                <p>支持郊区游戏;勇士撕裂</p>
                <a href="register.html" class="sign">注册并获取更多</a>
                <p class="footer-class"> © 2015 Sport 版权所有 |<a href="http://w3layouts.com/" target="_blank">W3layouts</a>的模板
                </p>
            </div>

        </div>
        <div class="clearfix"></div>
    </div>
    <!-- 下订单-遮罩层 -->
    <div class="overlay" id="overlay" v-if="showCartTable">
        <!-- 弹出框 -->
        <div class="popup">
            <h2>订单表填写</h2>
            <form>
                联系电话：<input id="tel" type="text" name="tel" v-model="orderInfo.tel" placeholder="请输入联系电话电话">
                <br>

                送货地址：<input name="address" type="text" placeholder="请输入送货地址" id="address"
                                v-model="orderInfo.address">
                <br>
                备注：<input type="text" id="ps" placeholder="请输入附言" name="ps" v-model="orderInfo.ps">
                <br>
                <button type="button" @click="confirmOrder">提交</button>
                <button type="quit" @click.prevent="showCartTable=!showCartTable">退出</button>
            </form>
        </div>
    </div>
<!--    客服聊天-遮罩层-->
</div>

<!-- search-scripts -->
<script src="js/classie.js"></script>
<script src="js/uisearch.js"></script>
<!-- //search-scripts -->
<script type="text/javascript" src="js/nav.js"></script>

<script src="js/jquery-1.9.1.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script type="text/javascript">
    let vm = new Vue({
        el: "#app",
        //model数据
        data: {
            //注册与登录数据
            username: 'joker',
            pwd: 'a',
            valcode: '',	//验证码

            isSearch: false,     //搜索框显示状态
            isLogin: false,		//记录当前登录状态

            shoes: [],		//商品数组
            sstyle: [],	//商品类型

            shoesCart: [],   //商品购物车
            cartprice: 0.0,	//总价

            showCartTable:false,  //显示下单表浮窗状态值

            //订单的model数据包装成一个对象
            orderInfo: {
                address: '',
                tel: "",
                ps: '',
            },
        },
        methods: {
            //获取当前地址
            getMyAddress:function() {
                var map = new BMap.Map("myaddress"); // 创建Map实例
                var point = new BMap.Point(116.331398, 39.897445);
                map.centerAndZoom(point, 12); //初始化地图,用一经纬度坐标设置地图中心点

                var geolocation = new BMap.Geolocation();
                geolocation.getCurrentPosition(function(r) {
                    if(this.getStatus() == BMAP_STATUS_SUCCESS) {
                        getAddress(r.point)
                        var ggPoint = new BMap.Point(r.point.lat, r.point.lng); //转化坐标
                        var map = new BMap.Map("myaddress");
                        map.centerAndZoom(ggPoint, 15);
                        console.log(ggPoint);
                        //添加marker
                        var markergg = new BMap.Marker(ggPoint);
                        map.addOverlay(markergg); //添加GPS marker
                        var labelgg = new BMap.Label("", {
                            offset: new BMap.Size(20, -10)
                        }); //显示当前区域
                        markergg.setLabel(labelgg); //添加GPS label
                        console.log(markergg);
                        //添加控件
                        map.addControl(new BMap.NavigationControl()); //平移缩放控件
                        map.addControl(new BMap.ScaleControl()); //比例尺
                        map.addControl(new BMap.OverviewMapControl()); //缩略地图
                        map.addControl(new BMap.MapTypeControl()); //地图类型
                        var point = new BMap.Point(markergg.point.lat, markergg.point.lng); //根据经纬度设置中心点坐标
                        map.centerAndZoom(point, 15);
                        //获取地址信息，设置地址label
                        function getAddress(point) {
                            var geocoder= new BMap.Geocoder();
                            geocoder.getLocation(point, function(addComp ) {
                                var addComp = addComp.addressComponents;
                                var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber; //获取地址
                                setTimeout(function(){
                                    // alert("您当前所在位置是：" + address);
                                    vm.$data.orderInfo.address=address;
                                }, 1000);
                            });
                        }
                    }
                });

            },
            //下订单
            confirmOrder: function (){
                //将this.orderInfo中的全部属性全部加入params
                var params = new URLSearchParams(this.orderInfo);
                axios.post("custOp.action?op=confirmOrder", params).then(result => {
                    if (result.data.code == 1) {
                        alert("下单成功...");
                        this.shoesCart = [];
                        this.cartprice = 0;
                        this.showCartTable = false  //显示下单表浮窗状态值
                    }
                })
            },
            //计算总价并显示
            showCartInfo: function (cart){
                this.shoesCart = cart;
                //计算总价
                this.cartprice = 0.0;
                this.shoesCart.forEach((item, index) => {
                    this.cartprice += item.smallCount;
                });
            },
            //添加数量
            increment(index, sid, num) {
                var params = new URLSearchParams();

                params.append("sid", sid);
                params.append("num", num);
                //post()返回值  Promise                   result是响应的结果(headers,data)
                axios.post('order.action?op=order', params).then(result => {
                    let jm = result.data;
                    if (jm.code == 1) {
                        //显示购物车
                        this.showCartInfo(jm.obj);
                    }
                });
            },
            //移除
            remove(index, sid) {
                var params = new URLSearchParams();
                params.append("sid", sid);
                //post()返回值  Promise                   result是响应的结果(headers,data)
                axios.post('order.action?op=remove', params).then(result => {
                    let jm = result.data;
                    if (jm.code == 1) {
                        //显示购物车
                        this.showCartInfo(jm.obj);
                    }
                });
            },
            //登录状态
            checkLogin: function () {
                return axios.get("user.action?op=checkLogin");
            },
            //初始化购物车界面
            findCartShoes: function () {
                var params = new URLSearchParams();
                return axios.post('order.action?op=getCartFoods', params);
            },
            //显示商品分类栏
            findStyle: function () {
                return axios.get("shoes.action?op=findStyle");
            },
            //点击分查询
            findStyleShoes: function (styleid) {
                var params = new URLSearchParams();
                // 获取片段标识符部分，即 '#item.sid'
                // var fragment = window.location.hash;
                // // 去除 '#' 符号
                // var styleid = fragment.substring(1); // 去除 '#' 符号
                // console.log("Received sid value:", sid);
                params.append("styleid", styleid);
                axios.post("shoes.action?op=findStyleShoes", params).then(result => {
                    vm.$data.shoes = result.data.obj;
                });
            },
        },
        mounted: function () {
            axios.all([this.checkLogin(), this.findCartShoes(), this.findStyle()]).then(
                axios.spread((d1, d2, d3) => {
                    if (d1.data.code == 1) {
                        //vm.$data.指的是model中的数据
                        //this.username:这是view-model中的数据
                        vm.$data.username = d1.data.obj.username;
                        vm.$data.isLogin = true;
                    }

                    if (d2.data.code == 1) {
                        this.showCartInfo(d2.data.obj);
                    }

                    if (d3.data.code == 1) {
                        vm.$data.sstyle = d3.data.obj;
                    }

                    this.findStyleShoes(this.sstyle.styleid);
                    setTimeout(() => {
                        this.getMyAddress();
                    }, 5000); // 3000毫秒即3秒后执行
                })
            );
        },
    });

</script>
</body>
</html>